<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.companyName"
            placeholder="全称或简称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="管理人"
          prop="manageUserIds"
        >
          <el-select
            v-model="queryParams.manageUserIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择管理人"
            style="width: 100%; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in manageOptionList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-select
            v-model="queryParams.status"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in statusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="查询时间"
          prop="dateRange"
        >
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['business:downCompany:add']"
            @click="handelDialog('添加', null)"
            >添加公司</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns.slice(0,columns.length - 1)">
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index)"
            align="center"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
          >
          <template slot-scope="scope">
            <!--账户余额单独处理 -->
            <div v-if="item.prop == 'surplusMoney'">
               <span
               :style="{color:scope.row[item.prop] >= 0?(scope.row[item.prop] !== 0 ? '#67C23A': '#606266'):'#F56C6C'}"
               >{{ scope.row[item.prop] }}</span>
            </div>
             <!--启用状态单独处理 -->
              <div v-else-if="item.prop == 'status'">
                <el-popconfirm
                  :title="`确定重新${!scope.row[item.prop]?'启用':'停用'}吗？`"
                  @confirm="changeEnabledState(scope.row)"
                 >
                  <el-button 
                    slot="reference"
                    :type="scope.row[item.prop]?'success':'info'" 
                    size="mini" 
                  >{{ scope.row[item.prop]?'启用':'停用' }}</el-button>
                 </el-popconfirm>
              </div>
              <!--MD5去重单独处理 -->
              <div v-else-if="item.prop == 'isMd5'" @click="showMd5Popo(scope.row)">
                <el-popover
                  placement="top"
                  title="MD5去重操作"
                  :value ="rowIndex === scope.row.id"
                  trigger="click"
                  >
                  <el-form style="width: 240px;" :model="md5Params" :rules="md5Rules" :ref="`md5_${scope.row.id}`">
                    <el-form-item label="去重状态" prop="isMd5" style="margin-bottom: 0;">
                      <el-radio-group v-removeAriaHidden v-model="md5Params.isMd5" >
                        <el-radio 
                         v-for="(item,index) in isMd5Option" 
                        :key="index" :label="item.value">{{ item.label }}
                      </el-radio>
                     </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      v-if="md5Params.isMd5"
                      label="限制时长" prop="checkNum">
                      <el-input-number 
                        v-model="md5Params.checkNum" 
                        controls-position="right" 
                        placeholder="请输入（限制时长秒）"
                        :min="1" 
                        style="width: 100%;"
                      >
                      </el-input-number>
                    </el-form-item>
                    <el-form-item style="display: flex;justify-content: center;">
                      <el-button type="primary" @click="clickSubmitMd5(scope.row,`md5_${scope.row.id}`)">提交</el-button>
                      <el-button @click="clickCancelMd5(scope.row)">取消</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button 
                     slot="reference"
                     :type="statusColor(scope.row[item.prop])" 
                     size="mini" 
                   >{{ ArrayFormatObj(isMd5Option)[scope.row[item.prop]]}}</el-button>
                </el-popover> 
              </div>
              <span v-else>
                {{  scope.row[item.prop] }}
              </span>
            </template>
        </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          :prop="columns[columns.length - 1].prop"
          :label="columns[columns.length - 1].label"
          align="center"
          :width="getColumnWidth(columns.length - 1)"
          v-if="columns[columns.length - 1].visible"
        >
          <template slot-scope="scope">
            <div :class="['flex-center',device === 'mobile'?'flex':'']">
              <el-button
                type="text"
                v-hasPermi="['business:downCompany:query']"
                :style="{marginLeft: device === 'mobile'?'10px':'0px'}"
                @click="handelDialog('查看', scope.row)"
                >查看</el-button
              >
              <el-button
                type="text"
                v-hasPermi="['business:downCompany:edit']"
                @click="handelDialog('编辑', scope.row)"
                >编辑</el-button
              >
              <!-- <el-button
                type="text"
                v-hasPermi="['system:dept:add']"
                @click="handelDialog('授信', scope.row)"
                >授信</el-button
              > -->
              <el-popconfirm
                title="确定要删除该公司吗？"
                style="margin-left: 10px"
                @confirm="handelDel(scope.row)"
              >
                 <el-button 
                 slot="reference"
                 type="text"
                 v-hasPermi="['business:downCompany:remove']"
                 ><span style="color: #ff116e">删除</span></el-button>
              </el-popconfirm>
            </div>
            
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 新增/编辑/查看/授信 对话框 -->
    <el-dialog
      :title="title"
      width="800px"
      :visible.sync="dialogShow"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" label-width="140px" ref="formRef" >
        <el-form-item label="公司/包简称" prop="simpleName" >
          <el-input
            v-model="form.simpleName"
            style="width: 100%"
            placeholder="请输入公司/包简称"
            clearable
            :disabled="viewsOptionState || creditOptionState"
          />
        </el-form-item>
        <el-form-item label="公司全称" prop="companyName" >
          <el-input
            v-model="form.companyName"
            style="width: 100%"
            placeholder="请输入公司全称"
            clearable
            :disabled="viewsOptionState || creditOptionState"
          />
        </el-form-item>
        <!-- 授权表单 -->
        <template v-if="creditOptionState">
          <el-form-item label="渠道授信" prop="ChannelCredit" >
            <el-input-number 
              v-model="form.ChannelCredit" 
              style="width: 100%"
              controls-position="right" 
              :min="0" 
              :precision="2"
              placeholder="可欠上游渠道的最高额度"
            >
            </el-input-number>
          </el-form-item>
          <el-form-item label="产品授信" prop="ProductCredit">
            <el-input-number 
              v-model="form.ProductCredit" 
              style="width: 100%"
              controls-position="right" 
              :min="0" 
              :precision="2"
              placeholder="下游产品可欠的最高额度"
            ></el-input-number>
          </el-form-item>
        </template>
         <!-- 新增/编辑/查看表单 -->
        <template v-else>
          <el-form-item label="公司地址" prop="provinceOrcity">
            <div style="display: flex;">
              <el-cascader
              ref="cascaderRef"
              filterable
              v-model="form.provinceOrcity"
              v-removeAriaHidden
              @change="cascaderChangeFun"
              :options="areaList"
              :props="{value:'name',label:'name',children:'list',emitPath:true,checkStrictly: true}"
              clearable
              :disabled="viewsOptionState"
              placeholder="请选择省市"
              ></el-cascader>
              <el-input
              v-model="form.detailedAddress"
              placeholder="请输入详细地址"
              clearable
              :disabled="viewsOptionState"
              />
            </div>
           </el-form-item>
          <el-form-item label="信用代码" prop="taxCode">
            <el-input
              v-model="form.taxCode"
              style="width: 100%"
              placeholder="请输入信用代码"
              clearable
              :disabled="viewsOptionState"
           />
          </el-form-item>
          <el-form-item label="开户银行" prop="bankName">
            <el-input
              v-model="form.bankName"
              style="width: 100%"
              placeholder="请输入开户银行"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="银行账号" prop="bankCode">
            <el-input
              v-model="form.bankCode"
              style="width: 100%"
              placeholder="请输入银行账号"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="联络人" prop="userName">
            <el-input
              v-model="form.userName"
              style="width: 100%"
              placeholder="请输入联络人"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="联络电话" prop="userPhone">
            <el-input
              v-model="form.userPhone"
              style="width: 100%"
              placeholder="请输入联络电话"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="超管账号" prop="adminAccount">
            <el-input
              v-model="form.adminAccount"
              style="width: 100%"
              placeholder="请输入超管账号"
              clearable
              :disabled="isAdd"
            />
         </el-form-item>
          <el-form-item label="联络邮箱" prop="userEmail">
            <el-input
              v-model="form.userEmail"
              style="width: 100%" 
              placeholder="请输入联络邮箱"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="form.remarks" 
              type="textarea" 
              placeholder="请输入内容" 
              :disabled="viewsOptionState"
              style="width: 100%"
              />
          </el-form-item>
          <el-form-item label="状态" prop="status">
             <el-select
               v-model="form.status"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="viewsOptionState"
             >
               <el-option
                 v-for="(item, index) in statusOption"
                 :key="index"
                 :label="item.label"
                 :value="item.value"
               ></el-option>
             </el-select>
          </el-form-item>
          <el-form-item
           label="管理人"
           prop="manageUserId"
          >
           <el-select
             v-model="form.manageUserId"
             clearable
             filterable
             placeholder="请选择管理人"
             style="width: 100%"
             :disabled="viewsOptionState"
           >
             <el-option
               v-for="(item, index) in manageOptionList"
               :key="index"
               :label="item.userName"
               :value="item.userId"
             ></el-option>
           </el-select>
         </el-form-item>
       </template>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!viewsOptionState">
        <el-button type="primary" @click="handleSubmit('formRef')"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import { listDownCompany, getDownCompanyById, addOrEditDownCompany, delDownCompany, onOrOff,limitSameMd5 } from "@/api/business/downCompanyManagement"
import { querySysUserManageList } from "@/api/system/userManage"
import { getAreaCodeTreeList } from "@/api/system/areaCode"

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "DownCompanyManagement",
  data() {
    return {
      // 公司管理列表
      dataList: [],
      // 管理人筛选项
      manageOptionList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [
        {label: `公司简称`,prop: "simpleName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `公司全称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `账户余额`,prop: "surplusMoney",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
        {label: `机构状态`,prop: "status",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: false,},
        {label: `在线产品数`,prop: "onNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `下线产品数`,prop: "offNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `停用产品数`,prop: "stopNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: false,sortable: true,},
        {label: `MD5去重`,prop: "isMd5",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: false,},
        {label: `创建时间`,prop: "createTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
        {label: `产品管理员`,prop: "manageUserName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `操作`,prop: "operation",visible: true,pcWidth: 130,mobileWidth: 80,fixed: "right",showTooltip: true},
      ],
      // 显示搜索栏
      showSearch: true,
      // 弹框标题
      title: "",
      // 弹框显示状态
      dialogShow: false,
      // 弹框的表单信息
      form: {
        // 默认状态启用
        status:1
      },
      // 弹框表单校验规则
      rules: {
        simpleName:[
          { required: true, message: "请填写公司/包简称", trigger: "blur" },
          { min: 1, max: 20, message: "公司/包简称长度范围在 1 到 20 个字符之间", trigger: "blur" }
        ],
        companyName:[
          { required: true, message: "请填写公司全称", trigger: "blur" },
          { min: 1, max: 50, message: "公司全称长度范围在 1 到 50 个字符之间", trigger: "blur" }
        ],
        manageUserId:[
          { required: true, message: "请选择公司管理人", trigger: "change" },
        ],
        userName:[
          { required: true, message: "请填写联络人", trigger: "blur" },
        ],
        userPhone:[
          { required: true, message: "请填写联络电话", trigger: "blur" },
          { pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: "请填写正确的联络电话", trigger: "blur" }
        ],
        adminAccount:[
          { required: true, message: "请填写超管账号", trigger: "blur" },
        ],
        ChannelCredit:[
          { required: true, message: "请填写渠道授信", trigger: "blur" },
        ],
        ProductCredit:[
          { required: true, message: "请填写产品授信", trigger: "blur" },
        ]
      },
      // 全国省市区列表(树型结构)
      areaList:[],
      // 状态筛选项
      statusOption:[
        { label: "停用", value: 0 },
        { label: "启用", value: 1 },
      ],
      // 下游公司对象
      downCompanyObj:{},
      // 当前激活项行数据
      rowIndex:null,
      // MD5去重状态筛选项
      isMd5Option:[
        { label: "关闭", value: 0 },
        { label: "启用", value: 1 },
      ],
      // md5去重参数
      md5Params: {},
      // md5弹框表单校验规则
      md5Rules:{
        isMd5:[
          { required: true, message: "请选择MD5去重状态", trigger: "change" },
        ]
      }

    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        // 清空popover激活项索引
        this.rowIndex = null
        this.updateTableHeight();
      },
      deep: true,
    },
    dataList:{
      handler() {
        // 清空popover激活项索引
        this.rowIndex = null
      },
      deep: true,
    },
  },
  created() {
    this.init();
    this.getManageList();
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index].pcWidth - this.slightWidth
          : this.columns[index].pcWidth + 17;
      };
    },
     // 对状态进行处理
     statusColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'danger';
             case 1:
                return 'primary';
             default:
           }
        }
     },
    // 将数组转换为对象形式
    ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },

    // (是否处于查看操作禁用表单项)
    viewsOptionState() {
      return this.title === '查看公司'
    },
    // 判断当前是否处于新增操作
    isAdd(){
      return !!this.downCompanyObj?.id
    },
    // (是否处于授信操作禁用表单项)
    creditOptionState(){
      return this.title === '公司授信管理'
    }
  },
  methods: {
     // 级联筛选器改变事件
    cascaderChangeFun(){
      const cascader = this.$refs.cascaderRef;
      if (cascader) {
        if (cascader.handleClear) {
          cascader.handleClear(); // 清除 UI 上的输入和选中
        }
        // if (cascader.handleExpandChange) {
        //   cascader.handleExpandChange([]); // 重置展开路径，回到根节点
        // }
      }
      // 强制更新组件
      this.$forceUpdate();
    },
    // 获取全国省市区列表
    getProvinceCityList(){
      getAreaCodeTreeList().then(res=>{
        this.areaList = res?.data
      })
    },
    // 获取管理人列表
    getManageList() {
      querySysUserManageList().then((res) => {
        this.manageOptionList = res?.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      // 重置时间范围
      this.$set(this, "dateRange", []);
      this.init();
    },
    init() {
      this.getList()
      this.getProvinceCityList()
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.createTimeStart = this.dateRange[0];
        this.queryParams.createTimeEnd = this.dateRange[1];
      }else{
        delete this.queryParams.createTimeStart
        delete this.queryParams.createTimeEnd
      }
      listDownCompany(this.queryParams).then((response) => {
        // 解决id为number类型精度丢失问题
        this.dataList = response?.data?.list.map((row)=>{
          return {
            ...row,
            id:row.id.toString()
          }
        });
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消加载状态
          this.loading = false;
        }, 2000);
      })
    },
    // 获取公司详情
    getUpCompanyDetail(companyId) {
      getDownCompanyById(companyId).then((response) => {
        // 对公司地址回显单独处理
        this.form = response.data;
        // 回显编辑公司对象
        this.$set(this,'downCompanyObj',response.data)
        // 不为空字符时操作
        if(response?.data?.companyAddr){
          let [province,city,detailedAddress] = response?.data?.companyAddr?.split('-')
          this.$set(this.form,'provinceOrcity',city !=="undefined" ?[province,city]:[province])
          this.$set(this.form,'detailedAddress',detailedAddress)
        }
      });
    },
    // 启用/停用状态切换触发回调
    changeEnabledState(row){
      const params = {
        id: row?.id,
        status:row?.status?0:1,
      };
      onOrOff(params).then((res) => {
        if(res.code === 200){
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },
    // 显示MD5去重弹出窗回调
    showMd5Popo(row) {
      // 设置MD5去重状态
      this.$set(this,'md5Params',{
        id: row?.id,
        isMd5: row?.isMd5,
        checkNum: row?.checkNum
      })
      // 设置索引打开弹窗
      this.rowIndex = row?.id
    },
    clickSubmitMd5(row,formName){
      this.$refs[formName][0].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.md5Params))
          console.log(params);
          limitSameMd5(params).then((res) => {
            if(res.code === 200){
              this.$message.success("操作成功");
              this.getList();
              this.rowIndex = null;
            }
          });

        }
      })
    },
    clickCancelMd5(row){
      this.$message.info("取消操作");
      this.rowIndex = null;
    },
    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 处理对话框
    handelDialog(title, row = null) {
      this.title = title + "公司";
      switch (title) {
        case "查看":
          // 获取公司详细信息回显数据
          this.getUpCompanyDetail(row?.id)
          break;
        case "添加":
          // 置空编辑公司对象
          this.$set(this,'downCompanyObj',{})
          break;
        case "编辑":
          // 获取公司详细信息回显数据
          this.getUpCompanyDetail(row?.id)
          break;
        case "授信":
          // 授信操作
          console.log(title,row);
          // 修改弹框显示标题
          this.title = '公司授信管理';
          break;
        default:
        // 其他操作
      }
      this.dialogShow = true;
    },
     /*关闭弹窗*/
     handleClose(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
      this.dialogShow = false;
    },
    // 删除列表项
    handelDel(row) {
      delDownCompany(row?.id).then((res) => {
        if(res.code === 200) {
            this.$message.success('删除成功')
            this.getList()
        }
      })
      
    },
    // 刷新数据且关闭弹框
    handleRefresh(){
       // 刷新数据
       this.getList()
       // 关闭弹窗
       this.handleClose()
    },
    /*提交操作*/
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.form))
          console.log(params);
          
          // 公司地址单独处理
          if(this.form?.provinceOrcity || this.form?.detailedAddress){
            let [province,city] = this.form?.provinceOrcity
            params.companyAddr =`${province}-${city}-${this.form?.detailedAddress}`
          }
          // 判断当前所处操作
          switch (this.title) {
            case "添加公司":
              // 添加操作
              console.log('添加',params);
              addOrEditDownCompany(params).then((res) => {
                 if(res.code === 200) {
                  this.$message.success('添加成功')
                  this.handleRefresh()
                 }
              })
              break;
            case "编辑公司":
              // 编辑操作
              console.log('编辑',params);
              addOrEditDownCompany(params).then((res) => {
                if(res.code === 200) {
                  this.$message.success('编辑成功')
                  this.handleRefresh()
                 }
              })
              break;
            case "公司授信管理":
              // 授信操作

              break;
            default:
              // 其他操作
          }

        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body{
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
</style>
